<template>
  <div class="assembleDetail" v-if="payGroupData">
    <div class="top_wrapper">
      <div class="circle"></div>
    <!-- <div class="price">
        <div>拼团</div>
        <div class="count" v-if="countFlag">
          <div class="count_content">
            <span class="count_tit">距活动结束仅剩 &nbsp;&nbsp;</span>
            <span class="data"><span>{{day}}</span> <span>天</span></span>
            <span class="hour"><span>{{hour}}</span> <span>时</span></span>
            <span class="min"><span>{{min}}</span>  <span>分</span></span>
            <span class="second"><span>{{second}}</span> <span>秒</span></span>
          </div>
        </div>
        <div class="count" v-else>活动结束</div>
      </div> -->

      <!-- 商品详情 -->
      <div class="content">
        <div class="content_left">
          <img :src="payGroupData.activity_info.goods_info.thumb_url" alt="" mode="scaleToFill">
        </div>
        <div class="content_right">
          <div class="content_right_tit">{{payGroupData.activity_info.goods_info.name}}</div>
          <div class="content_right_desc" v-if='payGroupData.group_goods_spu_name'> 规格：{{payGroupData.group_goods_spu_name}}</div>
          <div class="content_right_price">
            <span class="mprice">￥{{payGroupData.activity_info.goods_info.alone_price}}</span>
            <span class="sprice">￥{{payGroupData.activity_info.goods_info.group_price}}</span>
          </div>
        </div>
      </div>
    </div>
      <!-- 商品详情结束 -->

      <!-- 拼团规格 -->
      <div class="assemble_rule">
        拼团规格：邀请1人参团，人数不足自动退款 <span>></span>
      </div>
      <!-- 拼团规格结束 -->

      <!-- 拼团详情 -->
       <div class="assemble_msg">
         <div class="assemble_msg_tit" v-if="payGroupData.group_info.status==0">拼团剩余时间</div>
         <div class="assemble_msg_time" v-if="payGroupData.group_info.status==0">
           <span class="timer">{{hour}}</span><span>:</span>
           <span class="timer">{{min}}</span><span>:</span>
           <span class="timer">{{second}}</span>
         </div>
         <div class="assemble_msg_success" v-if="payGroupData.group_info.status==1">拼团成功</div>
         <div class="assemble_msg_imgList">
           <img :src="payGroupData.group_info.photo_url" alt="" mode="aspectFill">
           <!-- <img 
           v-show="payGroupData.is_join"
           :src="payGroupData.user_info.photo_url"
            alt="" mode="aspectFill"
            > -->
           <img 
           v-show="index==0"
           :src="item.photo_url"
            alt="" mode="aspectFill"
            v-for="(item,index) of payGroupData.group_info.group_add_list"
            :key="index">
            <!-- 只显示除自己外一个团员 -->

         </div>
         <div class="assemble_msg_member" @click='toAssembleMember' v-if="payGroupData.group_info.group_add_list.length!=0">查看全部团员</div>
         <div class="assemble_msg_man">
           仅剩<span>{{payGroupData.group_info.group_last_num}}</span>人，快来加入我的团吧!
         </div>
         <div class="assemble_msg_btn" @click="showCart" v-if="!payGroupData.is_join">立即参团</div>
          <button open-type="share" class="assemble_msg_btn wx_btn" v-if="payGroupData.is_join">邀请好友参团</button>
          <button @click="toOrder" class="assemble_msg_btn wx_btn" v-if="payGroupData.is_join">查看订单详情</button>
          <button @click="showQrcode" class="assemble_msg_btn wx_btn" v-if="payGroupData.is_join">分享海报</button>
       </div>
      <!-- 拼团详情结束 -->
      <!-- <div class="qrCode_wrapper"  > -->
         <img v-show="showModal && showModalType=='qrCode'" @load="imgLoaded" @error="imgError" class="qrCode_wrapper" mode="widthFix" :src="qrCodeUrl" alt="" @click="previewImage(qrCodeUrl)">
      <!-- </div> -->
     


       <!-- 弹出层 -->
        <div class="mask"  v-if="showModal" @click="hideCart"></div>
        <div class="modalDlg" v-if="showModal && showModalType=='cart'">
          <div class="modalDlg_top">
            <img :src="payGroupData.activity_info.goods_info.thumb_url" alt="">
            <div class="modalDlg_top_right">
              <div class="modalDlg_top_right_name">
                <span>{{payGroupData.activity_info.goods_info.name}}</span>
              </div>
              <div class="cart_price">
                <span>￥{{payGroupData.activity_info.goods_info.s_price}}</span>
                <span>库存：{{payGroupData.activity_info.goods_info.stock}}</span>
              </div>
            </div>
          </div>
          <div class="modalDlo_center">
            <div class="modalDlo_center_tit" v-if="payGroupData.activity_info.goods_info.goods_spu_info.length!=0">规格</div>
            <div class="modalDlo_center_classify">
              <div
                v-for="(item,index) of payGroupData.activity_info.goods_info.goods_spu_info"
                 :key="index" @click="select_classify(item,index)"
                 :class="{selectClassify:index==classifyIndex}"
                 >
                 {{item.spu_name}}
                </div>
            </div>
          </div>
          <div class="modalDlo_bottom">  
           <count @numberChange="numberChange" :stock="payGroupData.activity_info.goods_info.stock"><div>购买数量</div></count>
          </div>
          <div class="join_cart"  @click="buying" >确认</div>
        </div>
        <!-- 弹出层结束 -->
  </div>
</template>

<script>
import count from '@/components/count'


export default {
  name:'assembleDetail',
  components:{
    count
  },
  data(){
    return{
      countdown:'',
      day:'',
      hour:'',
      min:'',
      second:'',
      endDate2: '',
      countTimer:'',//定时器
      countFlag:true,//显示倒数
      showAssemble:'',
      showModal:false,
      order_num:'',
      payGroupData:'',//订单数据
      classifyIndex:-1,
      classifyId:'',
      showModalType:'',//显示遮罩层的类型
      qrCodeUrl:'',
      imgHasLoaded:false//海报已生成了

    }
  },
  onLoad(options){
    if(options.order_num){
      this.order_num=options.order_num;
      this.getPayGroup()
    }
    // this.getPayGroup()
  },   
  methods: {
    previewImage: function(src) {
        var current = src;
        wx.previewImage({
          current: current,
          urls: [current]
        })
      },
    getQrCodeUrl(){
      //获取分享海报
      
      const userToken=wx.getStorageSync('userToken');
      const group_id=this.payGroupData.group_info.id;
      this.qrCodeUrl=`https://wx.rzkeji.com/api/activity/generateShareQrCode?user_token=${userToken}&group_id=${group_id}`
    },
    imgLoaded(){
      this.imgHasLoaded=true
      wx.hideLoading()
    },
    imgError(){
      wx.hideLoading()
    },
    async getPayGroup(){//获取拼团订单信息
     const userToken=wx.getStorageSync('userToken')
      if(!userToken){
        this.$currency.showToast('请先授权登陆')
        wx.setStorageSync('toPage',`/pages/assembleDetail/main?order_num=${this.order_num}`)//保存授权前的地址
        setTimeout(()=>{
          this.$currency.navigateTo('/pages/login/main')
        },1500)
        return
      }
     const res=await this.$request.getData('/activity/getPayGroupAdd',{
        order_num:this.order_num,
        user_token:userToken
      })
      if(res.data.level=='success'){
        this.payGroupData=res.data.data;
        this.getQrCodeUrl()
        this.countTime(this.payGroupData.activity_info.end_time)
      }
    },
    select_classify(item,index){//选择规格
      this.classifyIndex=index
      this.classifyId=item.id

      this.payGroupData.activity_info.goods_info.stock=item.stock;
      this.payGroupData.activity_info.goods_info.price=item.price;
      this.$forceUpdate()
    },
    countTime(timer) {
      var that = this;
      if(!timer){
        return
      }
    this.countTimer=  setInterval(()=>{
        var date = new Date();
        var now = date.getTime();
        var endDate = new Date(timer);//设置截止时间
        if(isNaN(endDate)){
          // iso不能识别2018-08-30格式时间
          var timer1=timer.replace(/-/g, '/');
          var endDate=new Date(timer1)
        }
        var end = endDate.getTime();
        var leftTime = end - now; //时间差               
        var d, h, m, s, ms;
        if (leftTime >= 0) {
        d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
        h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
        m = Math.floor(leftTime / 1000 / 60 % 60);
        s = Math.floor(leftTime / 1000 % 60);
        // ms = Math.floor(leftTime % 1000);
        // ms = ms < 100 ? "0" + ms : ms
        s = s < 10 ? "0" + s : s
        m = m < 10 ? "0" + m : m
        h = h < 10 ? "0" + h : h

        // this.countdown=d + "：" + h + "：" + m + "：" + s + ":" + ms;
        // console.log(this.countdown)
        this.day=d;
        this.hour=h;
        this.min=m;
        this.second=s
        //递归每秒调用countTime方法，显示动态时间效果
        } else {
        this.countFlag=false
        }
      },1000)
    },
    showCart() { //显示加入购物车
        this.num=1;//清除规格数量
        this.showModal=true;
        this.showModalType='cart'
    },
    showQrcode(){
      if(!this.imgHasLoaded){
        wx.showLoading({title:'生成海报中'})
      }
      
      this.showModal=true;
      this.showModalType='qrCode'
    },
    buy(){//显示立即购买
      this.num=1;//清除规格数量
      this.showModal=true
    },
    async buying(){   //点击弹窗的立即购买
      var groupType='part'
      if(this.num<=0){
          this.$currency.showToast('购买数量不能为0');
          return
        }else if(this.classifyId=='' &&this.credit!='credit'){
          this.$currency.showToast('先选择规格吧');
          return
        }
      let res=await this.$request.postData('/order/submitOrder',{
        type:'group',
        goods_id:this.payGroupData.activity_info.goods_id,
        num:this.num,
        goods_spu_id:this.classifyId,
        activity_id:this.payGroupData.activity_info.id,
        group_type:groupType,
        group_id:this.payGroupData.group_info.id
        })
      if(res.data.level=='success'){
        this.$store.dispatch('setOrder',res.data.data)
        this.$currency.navigateTo(`/pages/orderConfirm/main`)
        
      }else{
        this.$currency.showToast(res.data.message)
      }
      
    },
    hideCart() { 
        this.showModal=false
        this.showModalType=''
    },
    toOrder(){
      this.$currency.navigateTo(`/pages/orderDetail/main?num=${this.order_num}`)
    },
    toAssembleMember(){
      this.$store.dispatch('setAssembleMember',this.payGroupData.group_info)
      this.$currency.navigateTo('/pages/assembleMember/main')
      
    }
  },
  onUnload(){
    clearInterval(this.countTimer)
  },
   onShareAppMessage(){
    return {
      title: 'F6能量饮微商城',
      desc:'F6功能饮、提神饮、醒酒、解酒能量饮微商城',
    }
  },
  // onHide(){
  //   clearInterval(this.countTimer)
  // }
  
}
</script>

<style lang="scss" scoped>
.assembleDetail{
  width: 100%;
  min-height: 100vh;
  background: #eee;
}
.top_wrapper{
  height: 150px;
}
  .circle{
    width:150%;
    height: 280px;
    border-radius: 50%;
    position: absolute;
    top:-180px;
    left:-25%;
    background-image: linear-gradient(to right,#ff6143,#ff1767);
  }
  .content{
    position: relative;
    z-index: 99;
    display: flex;
    height: 120px;
    top:30px;
    align-items: center;
    width: calc(100% - 40px);
    margin-left: 20px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0 5px  gray;
    .content_left{
      margin:0 20px;
      width: 100px;
      height: 100px;
      img{
        width:100%;
        height: 100%;
      }
    }
    .content_right{
      width: 100%;
      height:100%;
      display: flex;
      flex-wrap: wrap;
      align-content: space-around;
      &>div{
        width: 100%;
      }
      .mprice{
        color:#eb544d;
      }
      .sprice{
        text-decoration: line-through;
      }
    }
  }

  .assemble_rule{
    background: #fff;
    padding: 5px;
    margin: 20px 10px 0 10px;
    border-radius: 5px;
    text-align: center;
    &>span{
      float:right
    }
  }

  // 拼团详情
  .assemble_msg{
    padding:10px;
    margin-top: 20px;
    text-align: center;
    background: #fff;
    &_success{
      background-image: linear-gradient(to right,#ff6143,#ff1767);
      color:#fff;
      width: 100px;
      margin:15px auto;
      padding:5px;
      border-radius: 10px;
    }
    &_tit{
      margin:10px 0;
      color:#eb544d;
    }
    &_time{
      color:#eb544d;
      margin-bottom: 20px;
      .timer{
        background: #eb544d;
        color:#fff;
        padding:2.5px;
        border-radius: 5px;
        margin:0 10px;
      }
    }
    &_imgList{
      display: flex;
      justify-content: center;
      align-items: center;
      img{
        width: 60px;
        height: 60px;
        border-radius: 50%;
        // margin-right: -20px;
      }
    }
    &_member{
      border:1px solid #eb544d;
      border-radius: 10px;
      font-size: 12px;
      color:#eb544d;
      width: 90px;
      margin:10px auto;
    }
    &_man{
      margin:15px 0;
      span{
        color:#eb544d;
      }
    }
    &_btn{
      color:#fff;
      width: calc(100% - 80px);
      padding:10px 0;
      border-radius: 20px!important;
      margin:0 0 20px 40px;
      background-image: linear-gradient(to right,#ff6143,#ff1767);
    }
    .wx_btn{
      font-size: 15px;
    }
  }

  .mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    z-index: 9000;
    opacity: 0.7;
}
 
.modalDlg{
    width: 100%;
    height:45%;
    position: fixed;
    bottom:0;
    left: 0;
    z-index: 9999;
    background-color: #fff;
}

.modalDlg_top{
  padding:5px;
  padding-right:25px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
  
}
.modalDlg_top>img{
  width:80px;
  height: 80px;
}
.modalDlg_top_right{
  margin-left:20px;
  width:200px;
}
.modalDlg_top_right_name{
  display: flex;
  align-items: center
}
.modalDlg_top_right_name_tag{
  color:purple;
  display: inline-block;
  width:50px;
  text-align: center;
  border:1px solid purple;
  font-size: 10px;
  border-radius: 5px;
  margin-right:5px;
}
.modalDlg_top_right_name_tag+span{
  width:200px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
} 
.modalDlo_bottom{
  margin-left:5px;
}
.cart_price{
  margin-top:15px;
  display: flex;
  justify-content: space-between;
  align-items: center
}
.cart_price>span:nth-child(1){
  color:red;
}

.modalDlo_center,.modalDlo_center_tit,.modalDlo_center_classify{
  width:100%;
}
.modalDlo_center_classify{
  display:flex;
  align-items: center;
  flex-wrap:wrap;
  margin:10px 0;
  padding-bottom: 20px;
}
.modalDlo_center_classify>div{
  border:1px solid #eee;
  padding:2.5px 5px;
  border-radius: 5px;
  margin-left:5px;
  text-align: center;
}
.modalDlo_center_tit{
  padding-left:10px;
}
.join_cart{
  width:100%;
  background: rgb(196, 75, 75);
  color:#fff;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  position: absolute;
  bottom:0;
}
.join_cart>div{
  background:#ef8e60;
  width: 50%;
  float: left;
  height: 100%;
  font-size: 16px;
}
.join_cart>div:last-child{
  background: #eb544d
}
button::after {
  border: none;
}
button {
  background-color: #fff;
  line-height: 16px;
  font-size: 10px;
  border-radius:0;
}
.comment_item_pic{
    display:flex;
  }
  .comment_item_pic>img{
    width:80px;
    height: 80px;
    margin-right: 10px;
  }

  /* 规格 */
  .selectClassify{
    border:red 1px solid !important;
    color:red;
  }

  .qrCode_wrapper{
    width: 85%;
    position: fixed;
    top:20%;
    left: 50%;
    transform: translateX(-50%);
    justify-content: center;
    z-index: 100000;
    border-radius: 5px;
  }
</style>

